<template>
  <div class="app-container">
    <el-form ref="userProfileForm" :rules="rules" :model="user" label-width="160px">
      <span>关于我</span>
      <el-form-item label="头像" prop="name">
        <pan-thumb :image="user.avatar" :height="'100px'" :width="'100px'" :hoverable="false">
          <div>您好</div>
          {{ user.name }}
        </pan-thumb>
      </el-form-item>
      <el-form-item label="用户名" prop="name">
        <span>{{ user.name }}</span>
      </el-form-item>
      <el-form-item label="角色" prop="role">
        <span>{{ user.role }}</span>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import PanThumb from '@/components/PanThumb'

export default {
  name: 'Profile',
  components: { PanThumb },
  data() {
    return {
      user: {},
      rules: {}
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'avatar',
      'roles'
    ])
  },
  created() {
    this.getUser()
  },
  methods: {
    getUser() {
      this.user = {
        name: this.name,
        role: this.roles.join(' | '),
        avatar: this.avatar
      }
    }
  }
}
</script>
